<template>
  <div class="exam-container">
    <div class="exam-main">
      <div class="exam-screen">
        <div class="exam-screen__item">
          <div class="exam-screen__item-label">类型：</div>
          <div class="exam-screen__item-module">
            <div
                class="exam-screen__item-btn"
                :class="{ active: categoryId == 0 }"
                @click="clickModuleItem(0, 2)"
            >
              全部
            </div>
            <div
                class="exam-screen__item-btn"
                v-for="item in moduleList"
                :key="item.id"
                :class="{ active: categoryId == item.id }"
                @click="clickModuleItem(item.id, item.module_type)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="exam-screen__item" v-if="categoryList.length > 0">
          <div class="exam-screen__item-label">分类：</div>
          <div class="exam-screen__item-module">
            <div
                class="exam-screen__item-btn"
                :class="{ active: moduleId == 0 }"
                @click="handleCategory(0, 2)"
            >
              全部
            </div>
            <div
                class="exam-screen__item-btn"
                v-for="item in categoryList"
                :key="item.id"
                :class="{ active: moduleId == item.id }"
                @click="handleCategory(item.id, item.module_type)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
      <slot/>
    </div>

    <div class="sidebar-wrap">
      <div class="sidebar-top">
        <div
            class="sidebar-top__item"
            v-for="item in sideList"
            :key="item.path"
            @click="clickSideItem(item.path)"
        >
          <div class="bitmap"><img :src="item.img" alt=""/></div>
          <div class="field">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <el-dialog title="切换专业" :visible.sync="dialogVisible" top="30vh" width="500px">
      <el-row type="flex" :gutter="14" class="dialog-major">
        <div class="dialog-major-item" v-for="item in categoryTopList" :key="item.id">
          <span
              class="text"
              :class="{ active: specialtyId === item.id }"
              @click="clickCategoryItem(item)"
          >
            {{ item.title }}
          </span>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      moduleList: [],
      categoryList: [],
      categoryTopList: [],
      dialogVisible: false,
      sideList: [
        {
          title: '考试记录',
          img: require('@/assets/images/exam/exam_record.png'),
          path: '/my/exam/my_exams'
        },
        {
          title: '题目收藏',
          img: require('@/assets/images/exam/exam_topic.png'),
          path: '/my/exam/collected_topics'
        },
        {
          title: '错题本',
          img: require('@/assets/images/exam/exma_wrongtopic.png'),
          path: '/my/exam/wrong'
        }
      ],
      specialtyTitle: '',
      specialtyId: 0,
      categoryId: 0,
      moduleId: 0,
      moduleType: 0,
      answerRecord: {}
    }
  },
  computed: {
    routeName() {
      return this.$route.query.id
    },
    routeCategory() {
      return this.$route.query.category
    }
  },
  methods: {
    getModuleList() {
      this.$api.getExamModuleList(res => {
        this.moduleList = res.data
        const module = this.moduleList.find(item => item.id == this.categoryId)
        if (module) {
          this.moduleType = module.module_type
        }
        this.getCategoryInfo()
      })
    },
    getCategoryInfo() {
      this.$api.getExamCategoryTop(res => {
        const {data} = res
        if (data.length > 0) {
          this.specialtyId = this.categoryId
          this.categoryTopList = data
          this.getCategorySecond(this.specialtyId)
          this.handleCategory(this.specialtyId)
        }
        const router = {
          1: '/exam/point',
          2: '/exam/special',
          3: '/exam/paper',
          4: '/exam/rollup'
        }
        this.$router.push({
          path: router[this.moduleType],
          query: {id: this.categoryId, vid: this.specialtyId, category: this.moduleId}
        })
      })
    },
    getCategorySecond(id) {
      this.$api.getExamCategoryTree({pid: id}, res => {
        this.categoryList = res.data
      })
    },
    handleCategory(val) {
      this.$emit('change', {cid: val, mid: this.categoryId, vid: this.specialtyId})
      const router = {
        1: '/exam/point',
        2: '/exam/special',
        3: '/exam/paper',
        4: '/exam/rollup'
      }
      this.moduleId = val
      this.$router.push({
        path: router[this.moduleType],
        query: {id: this.categoryId, vid: this.specialtyId, category: this.moduleId}
      })
    },
    clickCategoryItem(data) {
      this.dialogVisible = false
      this.specialtyId = data.id
      this.specialtyTitle = data.title
      this.getCategorySecond(data.id)
      this.handleCategory(data.id)
      this.$router.push({query: {id: this.categoryId, vid: data.id, category: this.moduleId}})//
      this.getExamAnswerRecord(data.id)
    },
    clickModuleItem(id, type) {
      this.categoryId = id
      const router = {
        1: '/exam/point',
        2: '/exam/special',
        3: '/exam/paper',
        4: '/exam/rollup'
      }
      this.moduleId = 0
      this.$router.push({path: router[type], query: {id: id, vid: this.specialtyId, category: this.moduleId}})
      this.getCategorySecond(id)
    },
    clickSideItem(name) {
      this.$globalToLogin(() => {
        this.$router.push({path: name})
      })
    },
    getExamAnswerRecord(id) {
      this.$api.getExamAnswerRecord({category: id}, res => {
        this.answerRecord = res.data
      })
    }
  },
  mounted() {
    this.getModuleList()
  }
}
</script>

<style lang="scss" scoped>
.exam-container {
  width: 1200px;
  margin: 10px auto 0;
  display: flex;
  align-items: flex-start;

  .exam-main {
    width: 926px;

    .exam-screen {
      margin-top: 10px;
      background-color: #ffffff;
      padding: 20px 30px 0;

      .exam-screen__item {
        display: flex;
        align-items: flex-start;

        &-label {
          margin-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: $text-color-auxiliary;
          padding: 6px 0;
        }

        &-module {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          .exam-screen__item-btn {
            margin-bottom: 20px;
            margin-right: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #303133;
            padding: 6px 11px;
            cursor: pointer;

            &:hover {
              @include edu-color-auxiliary;
            }

            &.active {
              @include edu-color-auxiliary;
              background: #f7f7f7;
              border-radius: 13px;
            }
          }
        }
      }
    }
  }

  .sidebar-wrap {
    width: 260px;
    margin-left: auto;

    .sidebar-top {
      margin-top: 10px;
      padding: 20px 24px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;

      &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        .bitmap {
          width: 45px;
          height: 45px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .field {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 400;
          color: $text-color-import;
        }
      }
    }
  }

  .dialog-major {
    flex-wrap: wrap;

    .dialog-major-item {
      padding: 10px;
      display: flex;

      .text {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
        padding: 7px 10px;
        cursor: pointer;
        border-radius: 4px;

        &.active {
          background-color: #e4e7ed;
          color: #606266;
        }
      }
    }
  }
}
</style>
